<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>闪光划过动画特效的按钮</title>
    <link rel="stylesheet" href="./019.css" type="text/css" />
  </head>
  <body>
    <!--
      鼠标悬浮按钮上时一道光从左到右划过去。用渐变来模拟那道光，通过transform: translateX()将其平移至右边。
      给按钮加上overflow: hidden，光在按钮外的位置时就被隐藏起来了。
     -->
     <button class="btn btn-primary btn-ghost btn-shine">
      hover me
    </button>
  </body>
</html>
